<header class="main-header">
    <a href="../../index2.html" class="logo"
       style="background-color: #222d32;color: #fff;border-right: none;border-bottom: 1px solid grey;">
        <span class="logo-mini">wolf</span>
        <span class="logo-lg"><b>狼途汽车门店管理平台</b></span>
    </a>
    <!-- Header Navbar: style can be found in header.less -->
    <nav class="navbar navbar-static-top">
        <!-- Sidebar toggle button-->
        <a href="#" class="sidebar-toggle" data-toggle="push-menu" role="button">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </a>

        <div class="navbar-custom-menu">
            <ul class="nav navbar-nav">
                <li class="dropdown messages-menu">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                        <i class="fa fa-envelope-o"></i>
                        <span class="label label-danger">4</span>
                    </a>
                    <ul class="dropdown-menu">
                        <li class="header">你有4条未读公告</li>
                        <li id="notice">

                        </li>
                        <li class="footer"><a href="/notice/list">查看更多公告</a></li>
                    </ul>
                </li>
                <li class="dropdown tasks-menu">
                    <a href="#">
                        <i class="fa fa-flag-o"></i>
                    </a>
                </li>
                <li class="dropdown notifications-menu">
                    <a href="#">
                        <i class="fa fa-bell-o"></i>
                    </a>
                </li>
                <li>
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-gears"></i></a>
                    <ul class="dropdown-menu-right dropdown-menu dropdown-yellow dropdown-caret dropdown-close"
                        style="min-width: 100px;">
                        <li>
                            <a href="#">
                                <i class="fa fa-cog"></i>
                                个人设置
                            </a>
                        </li>
                        <li class="divider"></li>
                        <li>
                            <a href="#">
                                <i class=" fa fa-user"></i>
                                修改密码
                            </a>
                        </li>
                        <li class="divider"></li>
                        <li>
                            <a href="/logout">
                                <i class="fa fa-power-off"></i>
                                注销
                            </a>
                        </li>
                    </ul>
                </li>
            </ul>
        </div>
    </nav>

    <script>
        $('.dropdown-toggle').ready(function () {
            $.get('/notice/unread', function (data) {
                var list = data.list;
                $('.label-danger').text(list.length);
                $('.header').text('你有' + list.length + '条未读公告');
                var str='';
                list.forEach(function (ele) {
                    var date = new Date().getTime();
                    var timeStamp = ele.timeStamp;
                    str +=
                "<li><a href='/notice/reveal?id="+ ele.id + "'><div class='pull-left'><img src='/js/adminlte/img/user2-160x160.jpg' class='img-circle' style='width: 50px' alt='User Image'>"
                        +  "</div><h4>" +ele.creator.name+"<small><i class='fa fa-clock-o'></i>"
                        + (timeStamp) + "前</small></h4><p>" + ele.title +"</p></a></li>"
                });
                $('#notice').html(str)
            })
        })
    </script>
</header>